/* eslint-disable @typescript-eslint/no-unused-vars */
// 带input的color-picker
import React from 'react';
import { SketchPicker } from 'react-color';
import { Input, Popover } from 'antd';

interface IProps {
	color: any;
	change: Function;
	style?: any;
}

const InputColorPicker = ( props: IProps ) => {
	let { color, change, style } = props;

	const setRgbaColor = ( color ) => {
		console.log( color );
		// const type = color.source;
		// let newColor = '';
		// if ( type === 'hex' || type === 'hsv' ) {
		// 	newColor = color.hex;
		// } else if ( type === 'hsl' ) {
		// 	newColor = `hsla(${color.hsl.h},${color.hsl.s * 100}%,${color.hsl.l * 100}%,${color.hsl.a})`;
		// }
		const rgba = `rgba(${ color.rgb.r }, ${ color.rgb.g }, ${ color.rgb.b }, ${ color.rgb.a })`;
		change( rgba );
	};

	return (
		<div style={style}>
			<Popover
				content={
					<SketchPicker color={color} onChangeComplete={setRgbaColor} />
				}
				trigger="click"
			>
				<Input value={color} />
			</Popover>
		</div>
	);
};

export default React.memo( InputColorPicker );
